<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WMS仓库管理系统 - 模块化版本</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <!-- 登录界面 -->
        <section id="loginSection" class="login-section">
            <div class="login-container">
                <h2>WMS仓库管理系统登录</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名:</label>
                        <input type="text" id="username" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="password" id="password" required>
                    </div>
                    <button type="submit" class="btn-primary">登录</button>
                    <p>默认管理员账号: admin / 123456</p>
                </form>
            </div>
        </section>

        <!-- 主内容界面 -->
        <div id="mainContent" class="main-content">
            <header>
                <h1>WMS仓库管理系统</h1>
                <p>模块化仓库管理系统的前端界面</p>
                <div class="header-actions">
                    <button id="logoutBtn" class="btn-secondary">退出登录</button>
                </div>
            </header>

            <main>
                <section class="dashboard">
                    <h2>系统模块导航</h2>
                    <div class="module-grid">
                        <div class="module-card">
                            <h3>业务管理</h3>
                            <ul>
                                <li><a href="#inbound-documents">入库单据</a></li>
                                <li><a href="#outbound-documents">出库单据</a></li>
                                <li><a href="#inventory-query">库存查询</a></li>
                                <li><a href="#stocktaking">盘点管理</a></li>
                                <li><a href="#transfer">移库管理</a></li>
                            </ul>
                        </div>
                        
                        <div class="module-card">
                            <h3>视图管理</h3>
                            <ul>
                                <li><a href="#location-status">货位状态视图</a></li>
                                <li><a href="#location-material">货位物料视图</a></li>
                            </ul>
                        </div>
                        
                        <div class="module-card">
                            <h3>库存管理</h3>
                            <ul>
                                <li><a href="#inventory-overview">库存总览</a></li>
                                <li><a href="#inventory-details">库存明细</a></li>
                            </ul>
                        </div>
                        
                        <div class="module-card">
                            <h3>指令管理</h3>
                            <ul>
                                <li><a href="#instruction-list">指令列表</a></li>
                                <li><a href="#instruction-history">指令历史查询</a></li>
                            </ul>
                        </div>
                    </div>
                </section>

                <!-- 业务管理模块 -->
                <section id="business-management" class="module-section">
                    <h2>业务管理</h2>
                    
                    <div id="inbound-documents" class="subsection">
                        <h3>入库单据</h3>
                        <button id="addInboundBtn" class="btn-primary">创建入库单据</button>
                        <a href="create_inbound.html" class="btn-primary">新页面创建</a>
                        <div class="table-container">
                            <table id="inboundTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物ID</th>
                                        <th>供应商</th>
                                        <th>数量</th>
                                        <th>预计到达</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 入库单据数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div id="outbound-documents" class="subsection">
                        <h3>出库单据</h3>
                        <button id="addOutboundBtn" class="btn-primary">创建出库单据</button>
                        <a href="create_outbound.html" class="btn-primary">新页面创建</a>
                        <div class="table-container">
                            <table id="outboundTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物ID</th>
                                        <th>客户</th>
                                        <th>数量</th>
                                        <th>预计提货</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 出库单据数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div id="inventory-query" class="subsection">
                        <h3>库存查询</h3>
                        <div class="form-group">
                            <input type="text" id="inventorySearch" placeholder="输入货物名称或SKU进行搜索">
                            <button id="searchInventoryBtn" class="btn-primary">搜索</button>
                        </div>
                        <div class="table-container">
                            <table id="inventoryQueryTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物名称</th>
                                        <th>SKU</th>
                                        <th>数量</th>
                                        <th>位置</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 库存查询数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div id="stocktaking" class="subsection">
                        <h3>盘点管理</h3>
                        <button id="startStocktakingBtn" class="btn-primary">开始盘点</button>
                        <div class="table-container">
                            <table id="stocktakingTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物名称</th>
                                        <th>SKU</th>
                                        <th>系统数量</th>
                                        <th>实际数量</th>
                                        <th>差异</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 盘点数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div id="transfer" class="subsection">
                        <h3>移库管理</h3>
                        <button id="addTransferBtn" class="btn-primary">创建移库单</button>
                        <div class="table-container">
                            <table id="transferTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物ID</th>
                                        <th>源货位</th>
                                        <th>目标货位</th>
                                        <th>数量</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 移库数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- 视图管理模块 -->
                <section id="view-management" class="module-section">
                    <h2>视图管理</h2>
                    
                    <div id="location-status" class="subsection">
                        <h3>货位状态视图</h3>
                        <div class="view-controls">
                            <button id="refreshLocationStatusBtn" class="btn-primary">刷新视图</button>
                            <div class="view-options">
                                <label>
                                    <input type="checkbox" id="showEmptyLocations"> 显示空货位
                                </label>
                                <label>
                                    <input type="checkbox" id="showOccupiedLocations" checked> 显示有货货位
                                </label>
                            </div>
                        </div>
                        <div id="locationStatusView" class="visual-view">
                            <!-- 货位状态视图将通过JavaScript动态加载 -->
                            <p>货位状态视图加载中...</p>
                        </div>
                    </div>
                    
                    <div id="location-material" class="subsection">
                        <h3>货位物料视图</h3>
                        <div class="view-controls">
                            <button id="refreshLocationMaterialBtn" class="btn-primary">刷新视图</button>
                            <div class="form-group">
                                <input type="text" id="materialFilter" placeholder="输入物料名称筛选">
                            </div>
                        </div>
                        <div id="locationMaterialView" class="visual-view">
                            <!-- 货位物料视图将通过JavaScript动态加载 -->
                            <p>货位物料视图加载中...</p>
                        </div>
                    </div>
                </section>

                <!-- 库存管理模块 -->
                <section id="inventory-management" class="module-section">
                    <h2>库存管理</h2>
                    
                    <div id="inventory-overview" class="subsection">
                        <h3>库存总览</h3>
                        <div class="stats-grid">
                            <div class="stat-card">
                                <h4>总货物种类</h4>
                                <p id="totalGoodsTypes">0</p>
                            </div>
                            <div class="stat-card">
                                <h4>总库存数量</h4>
                                <p id="totalInventoryQuantity">0</p>
                            </div>
                            <div class="stat-card">
                                <h4>在库货位数</h4>
                                <p id="occupiedLocations">0</p>
                            </div>
                            <div class="stat-card">
                                <h4>空闲货位数</h4>
                                <p id="emptyLocations">0</p>
                            </div>
                        </div>
                        <div class="chart-container">
                            <h4>库存分布图</h4>
                            <canvas id="inventoryChart"></canvas>
                        </div>
                    </div>
                    
                    <div id="inventory-details" class="subsection">
                        <h3>库存明细</h3>
                        <div class="table-container">
                            <table id="inventoryDetailsTable">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>货物名称</th>
                                        <th>SKU</th>
                                        <th>数量</th>
                                        <th>位置</th>
                                        <th>状态</th>
                                        <th>批次号</th>
                                        <th>过期日期</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 库存明细数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>

                <!-- 指令管理模块 -->
                <section id="instruction-management" class="module-section">
                    <h2>指令管理</h2>
                    
                    <div id="instruction-list" class="subsection">
                        <h3>指令列表</h3>
                        <button id="addInstructionBtn" class="btn-primary">创建指令</button>
                        <div class="table-container">
                            <table id="instructionTable">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>任务号</th>
                                        <th>任务类型</th>
                                        <th>托盘号</th>
                                        <th>开始货位</th>
                                        <th>目标货位</th>
                                        <th>开始设备</th>
                                        <th>结束设备</th>
                                        <th>物料码</th>
                                        <th>物料名称</th>
                                        <th>执行数量</th>
                                        <th>指令结果</th>
                                        <th>完成方式</th>
                                        <th>完成时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 指令数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                    
                    <div id="instruction-history" class="subsection">
                        <h3>指令历史查询</h3>
                        <div class="filter-controls">
                            <div class="form-group">
                                <label>任务类型:</label>
                                <select id="instructionTypeFilter">
                                    <option value="">全部</option>
                                    <option value="入库">入库</option>
                                    <option value="出库">出库</option>
                                    <option value="移库">移库</option>
                                    <option value="盘点">盘点</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>日期范围:</label>
                                <input type="date" id="startDateFilter">
                                <input type="date" id="endDateFilter">
                            </div>
                            <button id="filterInstructionsBtn" class="btn-primary">筛选</button>
                        </div>
                        <div class="table-container">
                            <table id="instructionHistoryTable">
                                <thead>
                                    <tr>
                                        <th>编号</th>
                                        <th>任务号</th>
                                        <th>任务类型</th>
                                        <th>托盘号</th>
                                        <th>开始货位</th>
                                        <th>目标货位</th>
                                        <th>开始设备</th>
                                        <th>结束设备</th>
                                        <th>物料码</th>
                                        <th>物料名称</th>
                                        <th>执行数量</th>
                                        <th>指令结果</th>
                                        <th>完成方式</th>
                                        <th>完成时间</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- 指令历史数据将通过JavaScript动态加载 -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </main>
        </div>

        <!-- 添加货物模态框 -->
        <div id="addGoodsModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>添加货物</h2>
                <form id="addGoodsForm">
                    <input type="hidden" id="goodsId">
                    <div class="form-group">
                        <label for="goodsName">货物名称:</label>
                        <input type="text" id="goodsName" required>
                    </div>
                    <div class="form-group">
                        <label for="goodsSku">SKU:</label>
                        <input type="text" id="goodsSku" required>
                    </div>
                    <div class="form-group">
                        <label for="goodsQuantity">数量:</label>
                        <input type="number" id="goodsQuantity" min="0" value="0">
                    </div>
                    <div class="form-group">
                        <label for="goodsLocation">位置:</label>
                        <input type="text" id="goodsLocation">
                    </div>
                    <div class="form-group">
                        <label for="goodsStatus">状态:</label>
                        <select id="goodsStatus">
                            <option value="inStock">在库</option>
                            <option value="outStock">出库</option>
                            <option value="reserved">预留</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="goodsBatch">批次号:</label>
                        <input type="text" id="goodsBatch">
                    </div>
                    <button type="submit" class="btn-primary">添加货物</button>
                </form>
            </div>
        </div>

        <!-- 编辑货物模态框 -->
        <div id="editGoodsModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>编辑货物</h2>
                <form id="editGoodsForm">
                    <input type="hidden" id="editGoodsId">
                    <div class="form-group">
                        <label for="editGoodsName">货物名称:</label>
                        <input type="text" id="editGoodsName" required>
                    </div>
                    <div class="form-group">
                        <label for="editGoodsSku">SKU:</label>
                        <input type="text" id="editGoodsSku" required>
                    </div>
                    <div class="form-group">
                        <label for="editGoodsQuantity">数量:</label>
                        <input type="number" id="editGoodsQuantity" min="0">
                    </div>
                    <div class="form-group">
                        <label for="editGoodsLocation">位置:</label>
                        <input type="text" id="editGoodsLocation">
                    </div>
                    <div class="form-group">
                        <label for="editGoodsStatus">状态:</label>
                        <select id="editGoodsStatus">
                            <option value="inStock">在库</option>
                            <option value="outStock">出库</option>
                            <option value="reserved">预留</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="editGoodsBatch">批次号:</label>
                        <input type="text" id="editGoodsBatch">
                    </div>
                    <button type="submit" class="btn-primary">保存更改</button>
                </form>
            </div>
        </div>

        <!-- 查看入库单据详情模态框 -->
        <div id="viewInboundModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>入库单据详情</h2>
                <div id="inboundDetailContent">
                    <!-- 入库单据详情将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>

        <!-- 查看出库单据详情模态框 -->
        <div id="viewOutboundModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>出库单据详情</h2>
                <div id="outboundDetailContent">
                    <!-- 出库单据详情将通过JavaScript动态加载 -->
                </div>
            </div>
        </div>

        <!-- 创建指令模态框 -->
        <div id="addInstructionModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>创建指令</h2>
                <form id="addInstructionForm">
                    <div class="form-group">
                        <label for="taskId">任务号:</label>
                        <input type="text" id="taskId" required>
                    </div>
                    <div class="form-group">
                        <label for="taskType">任务类型:</label>
                        <select id="taskType" required>
                            <option value="入库">入库</option>
                            <option value="出库">出库</option>
                            <option value="移库">移库</option>
                            <option value="盘点">盘点</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="palletId">托盘号:</label>
                        <input type="text" id="palletId">
                    </div>
                    <div class="form-group">
                        <label for="startLocation">开始货位:</label>
                        <input type="text" id="startLocation">
                    </div>
                    <div class="form-group">
                        <label for="targetLocation">目标货位:</label>
                        <input type="text" id="targetLocation">
                    </div>
                    <div class="form-group">
                        <label for="startDevice">开始设备:</label>
                        <input type="text" id="startDevice">
                    </div>
                    <div class="form-group">
                        <label for="endDevice">结束设备:</label>
                        <input type="text" id="endDevice">
                    </div>
                    <div class="form-group">
                        <label for="materialCode">物料码:</label>
                        <input type="text" id="materialCode">
                    </div>
                    <div class="form-group">
                        <label for="materialName">物料名称:</label>
                        <input type="text" id="materialName">
                    </div>
                    <div class="form-group">
                        <label for="executeQuantity">执行数量:</label>
                        <input type="number" id="executeQuantity" min="0" value="0">
                    </div>
                    <button type="submit" class="btn-primary">创建指令</button>
                </form>
            </div>
        </div>

        <!-- 创建移库单模态框 -->
        <div id="addTransferModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>创建移库单</h2>
                <form id="addTransferForm">
                    <div class="form-group">
                        <label for="transferGoodsId">货物ID:</label>
                        <input type="number" id="transferGoodsId" required>
                    </div>
                    <div class="form-group">
                        <label for="sourceLocation">源货位:</label>
                        <input type="text" id="sourceLocation" required>
                    </div>
                    <div class="form-group">
                        <label for="targetLocation">目标货位:</label>
                        <input type="text" id="targetLocation" required>
                    </div>
                    <div class="form-group">
                        <label for="transferQuantity">数量:</label>
                        <input type="number" id="transferQuantity" min="1" value="1" required>
                    </div>
                    <button type="submit" class="btn-primary">创建移库单</button>
                </form>
            </div>
        </div>
    </div>

    <script src="js/modules.js"></script>
</body>
</html>